/**
 * Created by sybil052 on 2017/7/6.
 * 照片大图预览
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    TouchableOpacity,
    Dimensions,
    Image,
    View,
    ToastAndroid,
    ScrollView,
    Button,
    Text,
    TextInput
} from "react-native";
;
import ImageViewer from 'react-native-image-zoom-viewer';
type Props = {
    navigation:any,
}
export default class ImageShowScene extends Component <Props> {

    static navigationOptions = ({navigation}: any) => ({
        header: null
    })

    constructor(props) {
        super(props);
        this.state = {
            images: [],
            urls: [],
            imageIndex: 1,
        };
    }

    componentWillMount() {
        // 上个界面传来的照片集合


        let data = []
        this.props.navigation.state.params.photos.map((photo, index) => {
            let uri = photo.uri
            data.push(uri)
        })

        this.setState({
            imageIndex: this.props.navigation.state.params.index,
            images:data,
        });



    }

    render() {

        return (
            <View style={styles.container}>
                <ImageViewer
                    imageUrls={this.state.images} // 照片路径
                    enableImageZoom={true} // 是否开启手势缩放
                    index={this.state.imageIndex} // 初始显示第几张
                    imageWidth={200}
                    imageHeight={200}
                    onChange={(index) => {}} // 图片切换时触发
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({

    container: {
        flex: 1,
    },

});